<template>
  <div class="container">
    <!-- 搜索框 -->
    <div class="handle-box">
      <el-input class="handle-input" v-model="search_text" placeholder="请输入视频名关键字" size="mini" prefix-icon="el-icon-search" clearable />
    </div>
    <!-- 视频卡片 -->
    <div class="card-container" @click="handlePlay($event)">
      <el-card class="video-card" v-for="item of data" :key="item.id" shadow="hover" :body-style="{ padding: '0px'}">
        <div class="card-hover">
          <el-button type="primary" size="small" @click="pass(item.id)">√</el-button>&nbsp;&nbsp;&nbsp;
          <el-button type="danger" size="small" @click="handleRefuse(item.id,item.cause)">X</el-button>
        </div>
        <img class="img-pic" id="a" :videoName="item.videoName" :url="item.url" :src="getUrl(item.pic)">
        <div class="content-wrapper">
          <span class="card-title" :videoName="item.videoName" :url="item.url">{{item.videoName}}</span>
          <i class="iconfont icon-avatar1"> {{item.authorName}}</i>
          <i class="style">风格:{{changeStyle(item.style)}}</i>
        </div>
      </el-card>
    </div>
    
    <!-- 拒绝视频框 -->
    <el-dialog title="拒绝视频" :visible.sync="refuseVisible" center width="300px">
      <el-input type="textarea" v-model="noPassCause" placeholder="拒绝原因" size="normal" clearable></el-input>
      <span slot="footer">
        <el-button type="primary" @click="nopass()">确定</el-button>
        <el-button @click="refuseVisible = false">取消</el-button>
      </span>
    </el-dialog>
    
    <!-- 翻页 -->
    <div class="pagination">
      <el-pagination background class="page"
      layout="total,prev,pager,next"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="tableData.length"
      @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getAllUnCheckVideo,addToVideo,refuseVideo} from '../api/index'
import {mixin} from '../mixins/index'
export default {
  mixins:[mixin],
  data(){
    return {
      idx:-1,     //记录当前选中的行
      search_text:'',  //筛选的关键字
      refuseVisible:false,  //删除提示框
      noPassCause:'',
      tableData:[],   //显示的用户信息
      tempData:[],    //暂存的用户信息
      currentPage:1,  //当前页
      pageSize:12,    //每一页个数
    }
  },
  watch:{
    search_text:function(){
      if(this.search_text == ''){
        this.tableData = this.tempData
      }else{
        this.tableData = []
        for(let item of this.tempData){
          if(item.videoName.includes(this.search_text)){
            this.tableData.push(item)
          }
        }
      }
    }
  },
  computed:{
    data(){
      return this.tableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
    }
  },
  created(){
    this.getData();
  },
  methods:{
    handlePlay(e){
      var attr = e.target.attributes;
      if(attr.url){
        this.playVideo(attr.videoName.value,attr.url.value)
      }
    },
    //播放界面
    playVideo(videoName,url){
      this.$store.commit('setPlayFrame',true)
      this.$store.commit('setUrl',url)
      this.$store.commit('setIsPlay',false)
      this.$store.commit('setVideoName',videoName)
    },
    //获取当前页
    handleCurrentChange(val){
      this.currentPage = val;
    },
    //查询所有视频
    getData(){
      this.tempData=[]
      this.tableData=[]
      getAllUnCheckVideo()
        .then(res =>{
          this.tempData = res
          this.tableData = res
          this.currentPage = 1
        }).catch(err =>{
          console.log(err);
        })
    },
    handleRefuse(id,cause){
      this.refuseVisible = true;
      this.idx = id
      this.noPassCause = cause
    },
    //审核通过
    pass(id){
      addToVideo(id)
        .then(res =>{
          if (res.code==1) {
            this.getData()
            this.notify('审核成功','success')
          }else{
            this.notify('审核失败','error')
          }
        })
    },
    //审核未通过
    nopass(){
      var params = new URLSearchParams()
      params.append('id',this.idx)
      params.append('cause',this.noPassCause)
      refuseVideo(params)
        .then(res =>{
          if (res.code==1) {
            this.notify('拒绝成功','success')
            this.getData();
          }else{
            this.notify('拒绝失败','error')
          }
        })
    },
  }
}
</script>

<style scoped>
@import '../assets/css/checkVideo.css';
</style>